<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <style>
        .item {
            overflow: hidden;
            padding: 10px;
            width: 400px;
            border: 1px solid red;
        }

        .item img {
            width: 100px;
            float: left;

        }

        .film {
            border: 1px solid black;
            height: 1500px;
        }

        .filminfo {
            width: 300px;
            min-height: 200px;
            background: yellow;
            position: fixed;
            right: 50px;
            top: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div id='app'>
        <button @click="handleAjax">请求数据</button>

        <film-item v-for="item in list" :key="item.filmId" :mydata="item"></film-item>

        <film-detail></film-detail>
    </div>
</body>
<script>
    /* 
        需求：
            1. 获取数据    
            2. 渲染数据
            3. 点击详情，打印数据
    */
    Vue.component('filmItem', {
        props: ['mydata'],
        template: `
            <div class="item">
                <img :src="mydata.poster" />
                {{mydata.name}}
                <div>
                    <button @click="handleDetail">详情</button>
                </div>
            </div>`,
        methods: {
            handleDetail() {
                console.log(this.mydata.synopsis);
            }
        }
    });
    Vue.component("film-detail", {
        template: `<div class="filminfo">
                      详情--
                  </div>`
    });
    let vm = new Vue({
        el: '#app',
        data: {
            list: []
        },
        methods: {
            handleAjax() {
                fetch('./json/test.json')
                    .then(res => res.json())
                    .then(res => {
                        console.log(res.data.films);
                        this.list = res.data.films;
                    });
            }
        }
    });
    /*
        通信： 
            1. 父传子       属性(直接转账)
            2. 子传父       自定义绑定事件(签到合约)
            3. 表兄侄(画图)  bus (银行)
            4. 多组件之间    vuex 状态管理(支付宝)
    */
</script>

</html>